<template>
  <div class="app-container">
    <el-form :inline="true" :model="tableNameForm" ref="tableNameForm" :hide-required-asterisk="true">
      <el-form-item label="请选择数据表" prop="tableName" :rules="[{ required: true, message: '请选择数据表' }]">
        <el-select v-model="tableNameForm.tableName" placeholder="请选择" @change="changeTable">
          <el-option
            v-for="(item, index) in tableOptions"
            :key="index"
            :value="item"
            :label="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableInfo" :loading="loading">获取表信息</el-button>
        <el-button type="primary" @click="saveCode" v-show="this.showDetail" :loading="saving">保存代码</el-button>
      </el-form-item>
    </el-form>

    <div v-show="this.showDetail" v-loading="loading">
      基本信息
      <el-divider></el-divider>
      <el-form :model="generateInfo" label-width="120px" ref="generateInfo">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="代码生成路径" prop="path">
              <el-input v-model="generateInfo.path" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="JavaBean类名" prop="beanName">
              <el-input v-model="generateInfo.beanName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="JavaBean包名" prop="beanPath">
              <el-input v-model="generateInfo.beanPackageName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="Dao接口名" prop="daoName">
              <el-input v-model="generateInfo.daoName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="Dao包名" prop="daoPath">
              <el-input v-model="generateInfo.daoPackageName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="Controller类名" prop="controllerName">
              <el-input v-model="generateInfo.controllerName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="Controller包名" prop="controllerPath">
              <el-input v-model="generateInfo.controllerPackageName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      字段详情
      <el-divider></el-divider>
      <el-table
        :data="tableDetailList"
      >
        <el-table-column prop="columnName" label="表字段名" />
        <el-table-column prop="columnType" label="表字段类型" />
        <el-table-column prop="columnComment" label="字段描述">
          <template slot-scope="{row}">
            <el-input v-if="row.edit" v-model="row.columnComment" size="small" />
            <span v-else>{{ row.columnComment }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="Java类属性名" min-width="100px">
          <template slot-scope="{row}">
            <el-input v-if="row.edit" v-model="row.name" size="small" />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="Java类字段类型">
          <template slot-scope="{row}">
            <el-select v-if="row.edit" v-model="row.type">
              <el-option
                v-for="item in javaOptions"
                :key="item"
                :value="item"></el-option>
            </el-select>
            <span v-else>{{ row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="columnDefault" label="默认值">
          <template slot-scope="{row}">
            <el-input v-if="row.edit" v-model="row.columnDefault" size="small" />
            <span v-else>{{ row.columnDefault }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <div v-if="row.edit" style="display:flex;">
              <el-button
                round
                type="success"
                size="mini"
                @click="confirmEdit(row)"
              >保存</el-button>
              <el-button
                round
                size="mini"
                @click="cancelEdit(row)"
              >
                取消
              </el-button>
            </div>
            <el-button
              v-else
              type="text"
              size="mini"
              @click="row.edit=!row.edit"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getTables, getTableField, saveCode } from '@/api/tool/generate'

export default {
  data() {
    return {
      tableNameForm: {
        tableName: ''
      },
      tableOptions: [],
      loading: false,
      saving: false,
      showDetail: false,
      tableDetailList: [],
      javaOptions: ['String', 'Date', 'Integer', 'Long'],
      basePackage: 'com.sunxueqi.',
      generateInfo: {
        path: 'D:/generate1',
        beanName: '',
        daoName: '',
        controllerName: '',
        beanPackageName: '',
        daoPackageName: '',
        controllerPackageName: ''
      }
    }
  },
  computed: {
    
  },
  mounted() {
    this.getTables()
  },
  methods: {
    // 获取所有的数据表
    getTables() {
      getTables().then(res => {
        this.tableOptions = res.data.tableName
      })
    },
    // 切换数据表时自动加载详情信息
    changeTable() {
      this.getTableInfo()
    },
    // 获取数据表的字段信息
    getTableInfo() {
      this.$refs['tableNameForm'].validate(valid => {
        if(valid) {
          this.loading = true
          getTableField(this.tableNameForm.tableName).then(res => {
            this.showDetail = true
            const list = res.data.fields
            this.tableDetailList = list.map(item => {
              item.edit = false
              item.originName = item.name
              item.originType = item.type
              item.originColumnComment = item.columnComment
              item.originColumnDefault = item.columnDefault
              return item
            });
            const beanName = res.data.beanName
            this.generateInfo.beanName = beanName
            this.generateInfo.daoName = beanName + 'Mapper'
            this.generateInfo.controllerName = beanName + 'Controller'
            this.generateInfo.beanPackageName = this.basePackage + beanName.toLowerCase() + '.vo'
            this.generateInfo.daoPackageName = this.basePackage + beanName.toLowerCase() + '.dao'
            this.generateInfo.controllerPackageName = this.basePackage + beanName.toLowerCase() + '.controller'
            this.loading = false
          })
        }
      })
    },
    // 保存代码
    saveCode() {
      this.$refs['generateInfo'].validate(valid => {
        if(valid) {
          this.saving = true
          const data = this.generateInfo
          data['tableDetail'] = this.tableDetailList
          data['tableName'] = this.tableNameForm.tableName
          saveCode(data).then(res => {
            this.msgSuccess('代码生成成功')
          }).catch(e => {
            this.msgError('代码生成失败，请联系后台管理员')
          }).finally(() => {
            this.saving = false
          })
        }
      })
    },
    cancelEdit(row) {
      row.name = row.originName
      row.type = row.originType
      row.columnComment = row.originColumnComment
      row.columnDefault = row.originColumnDefault
      row.edit = false
    },
    confirmEdit(row) {
      row.edit = false
      row.originName = row.name
      row.originType = row.type
      row.originColumnComment = row.columnComment
      row.originColumnDefault = row.columnDefault
    }
  }
}
</script>

<style>

</style>
